<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>演示</title>
    <meta content="" name="Keywords">
    <meta content="" name="Description">
    <meta name="format-detection" content="telephone=no">
    <link href="/flow-ui/favicon.ico" rel="icon">
<link href="/flow-ui/css/style.css" rel="stylesheet">
<script type="text/javascript">
	if(window.location.href.indexOf('https')===0){
		document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
	}
</script>
<!--[if lt IE 9]><script src="/flow-ui/lib/H5shiv.js"></script><![endif]-->
</head>

<body>
    <header class="head"><div class="wrap fix"><h1>Flow-UI</h1></div></header>
    <div class="wrap">
        <h2 class="m-tb">栅格系统</h2>
        <div class="row m-b">
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
            <div class="span-1">
                <div class="p bg-info">.span-1</div>
            </div>
        </div>
        <div class="row m-b">
            <div class="span-8">
                <div class="p bg-info">.span-8</div>
            </div>
            <div class="span-4">
                <div class="p bg-info">.span-4</div>
            </div>
        </div>
        <div class="row m-b">
            <div class="span-4">
                <div class="p bg-info">.span-4</div>
            </div>
            <div class="span-4">
                <div class="p bg-info">.span-4</div>
            </div>
            <div class="span-4">
                <div class="p bg-info">.span-4</div>
            </div>
        </div>
        <div class="row m-b">
            <div class="span-6">
                <div class="p bg-info">.span-6</div>
            </div>
            <div class="span-6">
                <div class="p bg-info">.span-6</div>
            </div>
        </div>
        <div class="full-row m-b">
            <div class="span-6">
                <div class="p bg-primary">.full-row .span-6</div>
            </div>
            <div class="span-6">
                <div class="p bg-success">.full-row .span-6</div>
            </div>
        </div>
        <h2 class="m-tb">按钮</h2>
        <div class="m-b">
            <button type="button" class="btn btn-lg btn-default">default</button>
            <button type="button" class="btn btn-lg btn-primary">primary</button>
            <button type="button" class="btn btn-lg btn-info">info</button>
            <button type="button" class="btn btn-lg btn-success">success</button>
            <button type="button" class="btn btn-lg btn-warning">warning</button>
            <button type="button" class="btn btn-lg btn-danger">danger</button>
        </div>
        <div class="m-b">
            <button type="button" class="btn btn-default">default</button>
            <button type="button" class="btn btn-primary">primary</button>
            <button type="button" class="btn btn-info">info</button>
            <button type="button" class="btn btn-success">success</button>
            <button type="button" class="btn btn-warning">warning</button>
            <button type="button" class="btn btn-danger">danger</button>
        </div>
        <div class="m-b">
            <button type="button" class="btn btn-sm btn-default">default</button>
            <button type="button" class="btn btn-sm btn-primary">primary</button>
            <button type="button" class="btn btn-sm btn-info">info</button>
            <button type="button" class="btn btn-sm btn-success">success</button>
            <button type="button" class="btn btn-sm btn-warning">warning</button>
            <button type="button" class="btn btn-sm btn-danger">danger</button>
        </div>
        <div class="m-b">
            <a href="#" class="btn btn-ghost btn-lg btn-default">default</a>
            <a href="#" class="btn btn-ghost btn-lg btn-primary">primary</a>
            <a href="#" class="btn btn-ghost btn-lg btn-info">info</a>
            <a href="#" class="btn btn-ghost btn-lg btn-success">success</a>
            <a href="#" class="btn btn-ghost btn-lg btn-warning">warning</a>
            <a href="#" class="btn btn-ghost btn-lg btn-danger">danger</a>
        </div>
        <div class="m-b">
            <a href="#" class="btn btn-ghost btn-default">default</a>
            <a href="#" class="btn btn-ghost btn-primary">primary</a>
            <a href="#" class="btn btn-ghost btn-info">info</a>
            <a href="#" class="btn btn-ghost btn-success">success</a>
            <a href="#" class="btn btn-ghost btn-warning">warning</a>
            <a href="#" class="btn btn-ghost btn-danger">danger</a>
        </div>
        <div class="m-b">
            <a href="#" class="btn btn-ghost btn-sm btn-default">default</a>
            <a href="#" class="btn btn-ghost btn-sm btn-primary">primary</a>
            <a href="#" class="btn btn-ghost btn-sm btn-info">info</a>
            <a href="#" class="btn btn-ghost btn-sm btn-success">success</a>
            <a href="#" class="btn btn-ghost btn-sm btn-warning">warning</a>
            <a href="#" class="btn btn-ghost btn-sm btn-danger">danger</a>
        </div>
        <div class="m-b">
            <a href="#" class="btn btn-link">链接按钮</a>
        </div>
        <h2 class="m-tb">定义列表</h2>
        <dl class="dl dl-table">
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt>Felis euismod semper eget lacinia</dt>
            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
        </dl>
        <h2 class="m-tb">表格</h2>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tr>
                <td>1</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>2</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>3</td>
                <td>内容</td>
                <td>内容</td>
            </tr>
        </table>
        <h2 class="m-tb">色彩</h2>
        <div class="m-b">
            <p class="p text-primary">以你的风采</p>
            <p class="p text-success">以你的风采</p>
            <p class="p text-info">以你的风采</p>
            <p class="p text-warning">以你的风采</p>
            <p class="p text-danger">以你的风采</p>
        </div>
        <div class="m-b">
            <p class="p m-tb bg-primary">无聊的对话造就无聊的人生</p>
            <p class="p m-tb bg-success">无聊的对话造就无聊的人生</p>
            <p class="p m-tb bg-info">无聊的对话造就无聊的人生</p>
            <p class="p m-tb bg-warning">无聊的对话造就无聊的人生</p>
            <p class="p m-tb bg-danger">无聊的对话造就无聊的人生</p>
        </div>
        <h2 class="m-tb">表单</h2>
        <h4 class="m-tb">基本实例</h4>
        <form role="form m-b">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <label class="checkbox">
                <input type="checkbox">Check me out
            </label>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <h4 class="m-tb">内联表单</h4>
        <form class="form-inline m-b">
            <label class="sr-only" for="exampleInputEmail2">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
            <div class="input-group">
                <div class="input-group-addon">@</div>
                <input class="form-control" type="email" placeholder="Enter email">
            </div>
            <label class="sr-only" for="exampleInputPassword2">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
            <label class="checkbox">
                <input type="checkbox">Check me out
            </label>
            <button type="submit" class="btn btn-default">Sign in</button>
        </form>
        <h4 class="m-tb">水平排列</h4>
        <form class="form-horizontal m-b" role="form">
            <div class="form-group row">
                <label for="inputEmail3" class="span-2 control-label">Email</label>
                <div class="span-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword3" class="span-2 control-label">Password</label>
                <div class="span-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group row">
                <div class="pull-right-2 span-10">
                    <label class="checkbox">
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="pull-right-2 span-10">
                    <button type="submit" class="btn btn-default">Sign in</button>
                </div>
            </div>
        </form>
        <h4 class="m-tb">单选和多选</h4>
        <label class="checkbox">
            <input type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great
        </label>
        <label class="checkbox disabled">
            <input type="checkbox" value="" disabled> Option two is disabled
        </label>
        <label class="radio">
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great
        </label>
        <label class="radio">
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
        </label>
        <label class="radio disabled">
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled
        </label>
        <h4 class="m-tb">内联单选和多选</h4>
        <div class="m-b">
            <label class="checkbox checkbox-inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
            </label>
            <label class="checkbox checkbox-inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
            </label>
            <label class="checkbox checkbox-inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
            </label>
        </div>
        <div class="m-b">
            <label class="radio radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
            </label>
            <label class="radio radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
            </label>
            <label class="radio radio-inline">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
            </label>
        </div>
        <h4 class="m-tb">特殊样式</h4>
        <form class="form-horizontal m-b">
            <div class="form-group form-group-sm row has-success has-feedback">
                <label class="control-label span-2" for="inputSuccess3">Input with success</label>
                <div class="span-10">
                    <input type="text" class="form-control" id="inputSuccess3" placeholder="小尺寸"> <i class="ion form-control-feedback" aria-hidden="true">&#xe6a9;</i>
                </div>
            </div>
            <div class="form-group row has-warning has-feedback">
                <label class="control-label span-2" for="inputSuccess3">Input with warning</label>
                <div class="span-10">
                    <input type="text" class="form-control" id="inputSuccess3" placeholder="普通尺寸"> <i class="ion form-control-feedback" aria-hidden="true">&#xe60a;</i>
                </div>
            </div>
            <div class="form-group form-group-lg row has-error has-feedback">
                <label class="control-label span-2" for="inputSuccess3">Input with error</label>
                <div class="span-10">
                    <input type="text" class="form-control" id="inputSuccess3" placeholder="大尺寸"> <i class="ion form-control-feedback" aria-hidden="true">&#xe6b0;</i>
                </div>
            </div>
            <div class="form-group row">
                <label class="control-label span-2" for="inputGroupSuccess2">带徽标控件<big class="form-mark">*</big></label>
                <div class="span-10">
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
                    </div>
                </div>
            </div>
        </form>
        <h2 class="m-tb">字体图标</h2> 内置图标使用
        <a href="http://www.iconfont.cn/" target="_blank">阿里巴巴矢量图标库</a>管理，详情访问<a href="http://zangtao.org/projects/icons/" target="_blank" class="btn btn-link">图标库</a>项目主页。
        <h2 class="m-tb">标签</h2>
        <div class="label-list">
            <span class="label label-sm label-primary">标签-primary</span>
            <span class="label label-sm label-success">标签-success</span>
            <span class="label label-sm label-info">标签-info</span>
            <span class="label label-sm label-warning">标签-warning</span>
            <span class="label label-sm label-danger">标签-danger</span>
        </div>
        <div class="label-list">
            <span class="label label-primary">标签-primary</span>
            <span class="label label-success">标签-success</span>
            <span class="label label-info">标签-info</span>
            <span class="label label-warning">标签-warning</span>
            <span class="label label-danger">标签-danger</span>
        </div>
        <div class="label-list">
            <span class="label label-lg label-primary">标签-primary</span>
            <span class="label label-lg label-success">标签-success</span>
            <span class="label label-lg label-info">标签-info</span>
            <span class="label label-lg label-warning">标签-warning</span>
            <span class="label label-lg label-danger">标签-danger</span>
        </div>
    </div>
    
    <script src="/flow-ui/lib/sea.js" id="seajsnode"></script>
    <script>
    seajs.use('js/demo');
    </script>
</body>

</html>
